<template>
  <div class="train-opera-wrapper">
    <div class="opera-options">
      <div class="title middle" @click="toggleShowOptions()">
        <i class="iconfont">&#xe653;</i>
        <span class="text">操作指引</span>
        <i class="el-icon-arrow-right" :class="{
          'down': optionState
        }"></i>
      </div>
      <el-collapse-transition>
        <div v-show="optionState">
          <div class="options-item" @click="showPreview('functional')">功能演示</div>
          <div class="options-item" @click="showPreview('trainmanage')">培训管理流程</div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        previewList: [],
        previewState: false,
        optionState: false
      }
    },
    created () {
      window.ty = this
    },
    methods: {
      toggleShowOptions () {
        this.optionState = !this.optionState
      },
      showPreview (type) {
        window.open(`/help/trainoperadetail?type=${type}`)
        this.toggleShowOptions()
      }
    }
  }
</script>
<style lang="scss">
  
  .train-opera-wrapper{
    position: absolute;
    top: 170px;
    right: 150px;
    width: 155px;
    text-align: center;
    cursor: pointer;
    background-color: $color-background-base;
    .opera-options{
      .title{
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        .text{
          padding-left: 6px;
        }
      }
      .options-item{
        position: relative;
        z-index: 100;
        height: 50px;
        line-height: 50px;
        background-color: $color-background-base;
        &:hover{
          color: #fff;
          background-color: $color-success;
        }
      }
      .el-icon-arrow-right{
        font-size: 14px;
        transition: transform .3s;
        &.down{
          transform: rotate(90deg);
        }
      }
    }
    .el-dialog{
      margin-bottom: 0;
    }
  }
</style>
